<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/new.css">
		<link rel="stylesheet" href="font/iconfont.css">
		<link rel="stylesheet" href="css/animate.min.css">
		
	</head>
	<body>
		<div id="mainContainer">
			<header class="mui-bar mui-bar-nav">		
				<button class="mui-btn mui-btn-primary mui-btn-outlined btn-left" onclick='startRecognize()'>二维码</button>
				<div id="bcid"></div>
				<h1 id="title" class="mui-title">resume</h1>
				<button class="mui-btn mui-btn-primary mui-btn-outlined btn-right" onclick="galleryImg()">选择单张图片</button>
			</header>
			
			<div class="mui-content">
				<div id="slider" class="mui-slider mui-fullscreen">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a class="mui-control-item mui-active" href="#item1mobile">
								技能
							</a>
							<a class="mui-control-item" href="#item2mobile">
								项目
							</a>
							<a class="mui-control-item" href="#item3mobile">
								经历
							</a>
							<a class="mui-control-item" href="#item4mobile">
								我
							</a>
							
						</div>
					</div>
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="mui-table-view">
										
									</ul>
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll-wrapper">
								<div class="mui-scroll">
									
									<div id="slider" class="mui-slider">
											<div class="mui-slider-group mui-slider-loop">
												<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
												<div class="mui-slider-item mui-slider-item-duplicate">
													<a style="top: 165px;" href="#">
														<img id="project" src="images/project4.png">
														<p class="mui-slider-title">天猫男人节主题商城开发</p>
													</a>
												</div>
												<div class="mui-slider-item">
													<a style="top: 165px;" href="#">
														<img id="project" src="images/project1.png">
														<p class="mui-slider-title">淘宝秋装系列网页开发</p>
													</a>
												</div>
												<div class="mui-slider-item">
													<a style="top:165px;" href="#">
														<img id="project" src="images/project2.png">
														<p class="mui-slider-title">京东双11系列活动策划</p>
													</a>
												</div>
												<div class="mui-slider-item">
													<a style="top: 165px;" href="#">
														<img id="project" src="images/project3.png">
														<p class="mui-slider-title">智能家居官网开发</p>
													</a>
												</div>
												<div class="mui-slider-item">
													<a style="top: 165px;" href="#">
														<img id="project" src="images/project4.png">
														<p class="mui-slider-title">天猫男人节主题商城开发</p>
													</a>
												</div>
												<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
												<div class="mui-slider-item mui-slider-item-duplicate">
													<a style="top: 165px;" href="#">
														<img id="project" src="images/project1.png">
														<p class="mui-slider-title">淘宝秋装系列网页开发</p>
													</a>
												</div>
											</div>
											<div class="mui-slider-indicator mui-text-right">
												<div class="mui-indicator mui-active"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
												<div class="mui-indicator"></div>
											</div>
										</div>
									<div class="mui-content">		
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/project1.png)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2008年-2010年</p>
													<p style="color: #333;">技术团队主要负责人，主要负责和瑞控股公司的官方网站的维护和推广。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">总经理</a>
												<a class="mui-card-link">团队规模：30 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/project2.png)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2010年-2012年</p>
													<p style="color: #333;">淘宝前端开发团队成员，参与混合式开发移动APP、微信小程序等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">技术顾问</a>
												<a class="mui-card-link">团队规模：80 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/project3.png)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2012年-2015年</p>
													<p style="color: #333;">就职于杭州阿里巴巴总公司，参与WebAPP、淘宝商城开发等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">项目经历</a>
												<a class="mui-card-link">团队规模：90 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/project4.png)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2015年-2017年</p>
													<p style="color: #333;">就职于京东前端团队，参与web商城开发、前后端联调等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">项目经历</a>
												<a class="mui-card-link">团队规模：70 人</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="item3mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="mui-content">		
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/1.jpg)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2008年-2010年</p>
													<p style="color: #333;">技术团队主要负责人，主要负责和瑞控股公司的官方网站的维护和推广。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">总经理</a>
												<a class="mui-card-link">团队规模：30 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/0.jpg)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2010年-2012年</p>
													<p style="color: #333;">淘宝前端开发团队成员，参与混合式开发移动APP、微信小程序等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">技术顾问</a>
												<a class="mui-card-link">团队规模：80 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/3.jpg)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2012年-2015年</p>
													<p style="color: #333;">就职于杭州阿里巴巴总公司，参与WebAPP、淘宝商城开发等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">项目经历</a>
												<a class="mui-card-link">团队规模：90 人</a>
											</div>
										</div>
										<div class="mui-card">
											<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(images/5.jpg)"></div>
											<div class="mui-card-content">
												<div class="mui-card-content-inner">
													<p>2015年-2017年</p>
													<p style="color: #333;">就职于京东前端团队，参与web商城开发、前后端联调等工作。</p>
												</div>
											</div>
											<div class="mui-card-footer">
												<a class="mui-card-link">项目经历</a>
												<a class="mui-card-link">团队规模：70 人</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="item4mobile" class="mui-slider-item mui-control-content">
							<div class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="mui-content">
										<div class="resume fadeInRight" id="dowebok"  >
											<img src="images/zhuchi.png" id="face"/>
										</div>
										<div id="int" >
											<p class="lightSpeedIn" id="dowebok">张中昂</p>
											<p class="lightSpeedIn" id="dowebok">23岁</p>
											<p class="lightSpeedIn" id="dowebok">兴趣爱好及特长：主持、排球、旅行</p>
										</div>
										
										<div class="mui-content-padded">
											<p id="int">大一那年参加校十佳主持人大赛</p>
											<p style="text-align: center;">
												<img src="images/zhuchi2.png" data-preview-src="" data-preview-group="1" />
											</p>
											<p id="int">大二那年校排球赛剪影</p>
											<p style="text-align: center;">
												<img src="images/paiqiu.png" data-preview-src="" data-preview-group="1" />
											</p>
											<p id="int">大三那年拍摄于芜湖方特</p>
											<p style="text-align: center;">
												<img src="images/lvxing.png" data-preview-src="" data-preview-group="1" />
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/mui.zoom.js"></script>
		<script src="js/mui.previewimage.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
				
		<script>
			var bstart=0;
			mui.init();
				(function($) {
					//阻尼系数
					var deceleration = mui.os.ios?0.003:0.0009;
					$('.mui-scroll-wrapper').scroll({
						bounce: false,
						indicators: true, //是否显示滚动条
						deceleration:deceleration
					});
					$.ready(function() {
						
						
						var createFragment = function(ul, index, count, reverse) {
							var length = ul.querySelectorAll('li').length;
							var fragment = document.createDocumentFragment();
							var li;
							for (var i = 0; i < count; i++) {
								li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
								fragment.appendChild(li);
							}
							return fragment;
						};
					});
				})(mui);
				
	//			扫描二维码功能
				var scan = null;
				function onmarked( type, result ) {
					var text = '未知: ';
					switch(type){
						case plus.barcode.QR:
						text = 'QR: ';
						break;
						case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
						case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
					}
					alert( text+result );
				}
				function startRecognize() {	
					if(bstart==0){
						$('.btn-left').html('关闭');
						$("#bcid").css({'display':'block'});			   
						var view=document.getElementById("bcid");
						view.setAttribute("display", "block"); 
						scan = new plus.barcode.Barcode('bcid');
						scan.onmarked = onmarked; 
						scan.start();
						bstart=1;
					}else if(bstart==1){
						$('.btn-left').html('二维码');
						$("#bcid").css({'display':'none'});
						var view=document.getElementById("bcid");
						view.setAttribute("display", "none"); 
						scan = new plus.barcode.Barcode('bcid');
						scan.onmarked = onmarked; 
						scan.close();						
						bstart=0;
					}
			    	
				}
				
				
	//			选择照片
				function galleryImg() {
					// 从相册中选择图片
					console.log("从相册中选择图片:");
				    plus.gallery.pick( function(path){
				    	console.log(path);
				    }, function ( e ) {
				    	console.log( "取消选择图片" );
				    }, {filter:"image"} );
				}
			
			//给技能页加内容

				mui.ajax('http://www.angtime.online/www/api/skill.php',{
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
		                var html = "";
		                for(var i=0;i<data.length;i++){
		                    html +='<li id="noline">' + data[i].icont +' '+ data[i].category +"</li><li id='noline'>" + data[i].name + "</li><li id='noline'>"+ data[i].time +"</li><li>"+ data[i].level +"</li>";		                    
		                }
		                $("#item1mobile ul").html(html);   
		               
		            },
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
				
				mui.previewImage();
		</script>
	</body>

</html>